<!-- 笔试页面  -->
<template>
  <div class="written-exam-container">
    <!-- 头部区域 - 标题和计时器 -->
    <div class="exam-header">
      <div class="exam-title">
        <h1>{{ examData.title }}</h1>
        <p class="exam-description">{{ examData.description }}</p>
      </div>
      <div class="exam-timer" :class="{ 'timer-warning': timeRemaining <= 600 }">
        <a-badge status="processing" :text="formattedTime" />
        <div class="timer-hint">剩余时间</div>
      </div>
    </div>

    <!-- 主体区域 - 题目和答题卡 -->
    <div class="exam-body">
      <!-- 左侧题目区域 -->
      <div class="question-area">
        <a-card :bordered="false" class="question-card" style="overflow-y: auto">
          <!-- 题目导航 -->
          <div class="question-nav">
            <div class="nav-info">
              <span class="question-number"
                >题目 {{ currentIndex + 1 }}/{{ questions.length }}</span
              >
              <span class="question-type">{{
                questions[currentIndex]?.type === 'choice'
                  ? '选择题'
                  : questions[currentIndex]?.type === 'essay'
                  ? '问答题'
                  : '编程题'
              }}</span>
            </div>
            <div class="nav-buttons">
              <a-button @click="prevQuestion" :disabled="currentIndex === 0" size="small">
                <template #icon>
                  <left-outlined />
                </template>
                上一题
              </a-button>
              <a-button
                @click="nextQuestion"
                :disabled="currentIndex === questions.length - 1"
                type="primary"
                size="small"
              >
                下一题
                <template #icon>
                  <right-outlined />
                </template>
              </a-button>
            </div>
          </div>

          <!-- 题目标题 -->
          <div class="question-content">
            <h2 class="question-title">{{ questions[currentIndex]?.title }}</h2>
            <div class="question-desc">{{ questions[currentIndex]?.description }}</div>

            <!-- 题目内容 -->
            <!-- 选择题 -->
            <div v-if="questions[currentIndex]?.type === 'choice'" class="choice-options">
              <a-radio-group v-model:value="tempAnswers[currentIndex]" class="option-group">
                <a-radio
                  v-for="(option, index) in questions[currentIndex].options"
                  :key="index"
                  :value="option.key"
                  class="option-item"
                >
                  {{ option.value }}
                </a-radio>
              </a-radio-group>
            </div>

            <!-- 问答题 -->
            <div v-else-if="questions[currentIndex]?.type === 'essay'" class="essay-area">
              <a-textarea
                v-model:value="tempAnswers[currentIndex]"
                :rows="8"
                placeholder="请输入您的回答..."
                :max-length="2000"
                show-count
                allow-clear
              />
            </div>
            <!-- 编程题 -->
            <div v-else>
              <a-form :model="codeModelList[currentIndex]" layout="inline">
                <a-form-item
                  field="language"
                  label="语言"
                  :style="{ width: '320px', marginBottom: '8px', marginRight: '40vw' }"
                >
                  <a-select
                    v-if="codeModelList[currentIndex]"
                    v-model:value="codeModelList[currentIndex].language"
                  >
                    <a-select-option value="java">java</a-select-option>
                    <a-select-option value="cpp">cpp</a-select-option>
                    <a-select-option value="go">go</a-select-option>
                    <a-select-option value="python">python</a-select-option>
                    <a-select-option value="javascript">JavaScript</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item style="margin-left: auto">
                  <a-button
                    type="primary"
                    shape="round"
                    :loading="debugLoading"
                    @click="handleDebug"
                    style="
                      background-color: rgba(24, 146, 159, 0.84);
                      border-color: rgba(102, 225, 211, 0.53);
                    "
                  >
                    <template #icon>
                      <BugOutlined />
                    </template>
                    自动调试
                  </a-button>
                </a-form-item>
              </a-form>

              <!-- 调试状态显示 -->
              <div
                v-if="debugStatus"
                class="debug-status"
                :class="{
                  'debug-loading': debugStatus === 'loading',
                  'debug-success': debugStatus === 'success',
                  'debug-error': debugStatus === 'error',
                }"
              >
                <template v-if="debugStatus === 'loading'">
                  <a-spin size="small" />
                  <span style="margin-left: 8px">正在调试中...</span>
                </template>

                <template v-else-if="debugStatus === 'success'">
                  <check-circle-filled style="color: #52c41a" />
                  <span style="margin-left: 8px">{{ debugResult.message }}</span>
                  <div style="margin-top: 8px">
                    <a-tag color="green"
                      >通过: {{ debugResult.passed }}/{{ debugResult.total }}
                    </a-tag>
                  </div>
                </template>

                <template v-else-if="debugStatus === 'error'">
                  <close-circle-filled style="color: #ff4d4f" />
                  <span style="margin-left: 8px">{{ debugResult.message }}</span>

                  <div v-if="debugResult.testCases" style="margin-top: 12px">
                    <div
                      v-for="(testCase, index) in debugResult.testCases"
                      :key="index"
                      class="test-case"
                      :class="{ 'test-case-failed': testCase.expected !== testCase.actual }"
                    >
                      <div>
                        <span class="test-case-label">输入:</span>
                        <code>{{ testCase.input }}</code>
                      </div>
                      <div>
                        <span class="test-case-label">预期:</span>
                        <code>{{ testCase.correctOutput }}</code>
                      </div>
                      <div>
                        <span class="test-case-label">实际:</span>
                        <code
                          :style="{
                            color: testCase.expected === testCase.actual ? '#52c41a' : '#ff4d4f',
                          }"
                        >
                          {{ testCase.errorOutput }}
                        </code>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <!-- 代码编辑器 -->
              <CodeEditor
                v-if="codeModelList[currentIndex]"
                :value="codeModelList[currentIndex].code"
                :handle-change="onChangeCode"
                :language="codeModelList[currentIndex].language"
                :class="{
                  'debug-success-border': debugStatus === 'success',
                  'debug-error-border': debugStatus === 'error',
                }"
              />
            </div>
          </div>
        </a-card>
      </div>

      <!-- 右侧答题卡区域 -->
      <div class="answer-card-area">
        <a-card title="答题卡" :bordered="false" class="answer-card">
          <div class="progress-section">
            <div class="progress-label">答题进度</div>
            <a-progress
              :percent="answeredPercent"
              :format="(percent) => `${answeredCount}/${questions.length}`"
              :stroke-color="answeredPercent < 100 ? '#1890ff' : '#52c41a'"
            />
          </div>

          <a-divider />

          <div class="question-navigator">
            <div class="navigator-title">题目导航</div>
            <div class="navigator-grid">
              <a-button
                v-for="(q, index) in questions"
                :key="index"
                :type="
                  index === currentIndex ? 'primary' : tempAnswers[index] ? 'default' : 'dashed'
                "
                :class="['navigator-button', { 'answered-button': tempAnswers[index] }]"
                @click="goToQuestion(index)"
                size="small"
              >
                {{ index + 1 }}
              </a-button>
            </div>
          </div>

          <a-divider />

          <div class="submission-section">
            <a-alert
              v-if="!isAllAnswered"
              message="提示：尚有未完成的题目"
              description="您尚未回答所有题目，确认提交前请检查。"
              type="warning"
              show-icon
              class="submission-alert"
            />
            <a-button
              type="primary"
              block
              size="large"
              @click="handleSubmit"
              :disabled="false"
              class="submit-button"
            >
              提交答卷
            </a-button>
          </div>
        </a-card>
      </div>
    </div>

    <!-- 提交确认对话框 -->
    <a-modal
      v-model:visible="submitModalVisible"
      title="确认提交"
      @ok="confirmSubmit"
      :ok-button-props="{ disabled: !isAllAnswered }"
      :mask-closable="false"
    >
      <p>您确定要提交本次考试答卷吗？</p>
      <p v-if="!isAllAnswered" style="color: #faad14">
        注意：您尚有 {{ questions.length - answeredCount }} 道题目未回答。
      </p>
    </a-modal>

    <!-- 时间到提示 -->
    <a-modal
      v-model:visible="timeUpModalVisible"
      title="考试时间结束"
      :closable="false"
      :mask-closable="false"
      :footer="null"
    >
      <div class="time-up-content">
        <a-result
          status="info"
          title="考试时间已结束"
          sub-title="您的答卷已自动提交，请等待系统处理。"
        >
          <template #extra>
            <a-button type="primary" @click="goToHome">确认</a-button>
          </template>
        </a-result>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  CloseCircleFilled,
  LeftOutlined,
  RightOutlined,
  BugOutlined,
  CheckCircleFilled,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import {
  analyzeExamResultUsingPost,
  cancelExamUsingPost,
  debugCodeUsingPost,
  getQuestionUsingGet,
} from '@/api/examController'
import CodeEditor from '@/components/CodeEditor.vue'
import { getLocalCache, removeLocalCache } from '@/utils/LocalStorageUtils'

// 页面监控相关变量
const pageLeaveCount = ref(0) //切屏次数
const MAX_PAGE_LEAVE_COUNT = 5 //最大切屏数
const isMonitoringPageLeave = ref(false) //是否处于当前监控页面
const isCurrentlyAway = ref(false) // 跟踪用户是否当前离开了页面

// 考试数据
const examData = ref({
  id: 'frontend-dev-exam',
  title: getLocalCache('examPosition'),
  description: '本次笔试包含选择题和问答题，总时长90分钟，请合理安排答题时间。',
  duration: 90 * 60, // 90分钟，单位秒
})

//代码模型数据结构
interface CodeModel {
  language: string
  code: string
  description: string
}

interface Answer {
  type: string
  userAnswer: string
}

// 使用 defineProps 接收路由参数
const props = defineProps({
  examId: {
    type: String,
    required: true, // 如果 language 是必传的
  },
})
const router = useRouter()
const route = useRoute()
//重定向路由
let redirect = null

//代码数组
const codeModelList = ref<CodeModel[]>([])

// 题目数据（存放的要提交给后端的题目数据）
const questions = ref<any[]>([])

// 临时答案数据
const tempAnswers = ref(new Array(questions.value.length).fill(''))

// 答案数组
const answers = ref<Answer[]>([])

// 当前题目索引
const currentIndex = ref(0)

//笔试时长
const timeRemaining = ref(examData.value.duration) // 剩余时间，单位秒

/**
 * 代码修改时的回调函数
 * @param code
 */
const onChangeCode = (code: string) => {
  //将编程题答案保存到答案数组中
  tempAnswers.value[currentIndex.value] = {
    language: codeModelList.value[currentIndex.value].language,
    code: code,
  }
  //保存当前编程题答案到codeModelList中
  codeModelList.value[currentIndex.value].code = code
}

/**
 * 获取题目数据
 */
const fetchExamData = async () => {
  const data = await getQuestionUsingGet({ examId: props.examId as any })
  if (data.code === 0) {
    //将服务端返回的各种类型的题目数据统一扁平化放在一个数组中
    questions.value = await transformExamData(data.data)
    codeModelList.value = questions.value.map((item) => ({
      language: 'java',
      code: '',
      description: item.title,
    }))
  } else {
    message.error(data.message)
  }
}
/**
 * 统一扁平化题目数据
 * @param data
 */
const transformExamData = async (data) => {
  const result = []
  let questionIndex = 1

  // 处理选择题
  if (Array.isArray(data.choiceQuestions)) {
    data.choiceQuestions.forEach((item) => {
      result.push({
        id: `q${questionIndex++}`,
        type: 'choice',
        title: `${questionIndex - 1}. ${item.title}`,
        description: '请选择正确的选项。',
        options: item.optionList.map((opt) => ({
          key: opt.key,
          value: `${opt.key}. ${opt.value}`,
        })),
      })
    })
  }

  // 处理简答题（问答题）
  if (Array.isArray(data.shortAnswerQuestions)) {
    data.shortAnswerQuestions.forEach((item) => {
      result.push({
        id: `q${questionIndex++}`,
        type: 'essay',
        title: `${questionIndex - 1}. ${item}`,
        description: '请详细作答。',
      })
    })
  }

  // 处理编程题（如果存在）
  if (Array.isArray(data.programmingQuestions)) {
    data.programmingQuestions.forEach((item) => {
      result.push({
        id: `q${questionIndex++}`,
        type: 'programming',
        title: `${questionIndex - 1}. ${item}`,
        description: '请完成编程题，并提交代码。',
      })
    })
  }

  return result
}

//计数器id
const timerInterval = ref<number | null>(null)
const timeUpModalVisible = ref(false)
const debugLoading = ref(false)
const debugStatus = ref<string>('')
const debugResult = ref<any>({
  message: '',
  passed: 0,
  total: 0,
  error: '',
  testCases: [],
})

// 提交相关状态
const submitModalVisible = ref(false)
// 是否可以提交
const canSubmit = computed(() => {
  return isAllAnswered.value
})

// 计算时间
const formattedTime = computed(() => {
  const minutes = Math.floor(timeRemaining.value / 60)
  const seconds = timeRemaining.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

//已回答题目
const answeredCount = computed(() => {
  return tempAnswers.value.filter((answer) => answer !== '').length
})

//计算题目是否做完
const isAllAnswered = computed(() => {
  //答案数和问题数是否一致
  return answeredCount.value === questions.value.length
})

//计算答题进度
const answeredPercent = computed(() => {
  return Math.round((answeredCount.value / questions.value.length) * 100)
})

// 扣减时间方法
const startTimer = () => {
  timerInterval.value = window.setInterval(() => {
    if (timeRemaining.value > 0) {
      timeRemaining.value--
    } else {
      clearInterval(timerInterval.value as number)
      timeUpModalVisible.value = true
      autoSubmit()
    }
  }, 1000)
}

//上一题
const prevQuestion = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  }
}

//下一题
const nextQuestion = () => {
  if (currentIndex.value < questions.value.length - 1) {
    currentIndex.value++
  }
}

//跳转到指定题目
const goToQuestion = (index: number) => {
  currentIndex.value = index
}

//点击提交按钮
const handleSubmit = () => {
  submitModalVisible.value = true
}

//提交笔试内容
const confirmSubmit = async () => {
  let isFull = false
  if (redirect) {
    //全流程面试
    isFull = true
  }
  submitModalVisible.value = false

  // 如果正在监控页面离开，停止监控
  if (isMonitoringPageLeave.value) {
    stopPageLeaveMonitoring()
  }

  //获取全流程面试id
  const fullInterviewId = getLocalCache('fullInterviewId') || ''
  //分析笔试
  const data = await analyzeExamResultUsingPost({
    answers: JSON.stringify(answers.value),
    examId: props.examId as any,
    examDuration: (examData.value.duration - timeRemaining.value) as any,
    isFull: isFull,
    fullInterviewId: fullInterviewId as any,
  })
  if (data) {
    message.success('提交成功！请稍后查看笔试结果分析')
  } else {
    message.error('提交失败！')
  }
  if (isFull) {
    router.replace(redirect)
  } else {
    router.replace('/')
  }
  //清除localstorage中的缓存数据
  removeLocalCache('examPosition')
}

//取消笔试
const cancelExam = async () => {
  const data = await cancelExamUsingPost({
    examId: props.examId as any,
  })
  if (!data.data) {
    message.error('取消失败！')
  }
  //能触发这个函数一定是全流程面试
  router.replace(redirect)

  //清除localstorage中的缓存数据
  removeLocalCache('examPosition')
}

//时间到自动提交
const autoSubmit = () => {
  //提交笔试内容
  confirmSubmit()
}

// 跳转到首页
const goToHome = () => {
  message.info('请稍后到笔试记录中查看笔试成绩')
  router.replace('/')
}

/**
 * 调试代码
 */
const handleDebug = async () => {
  debugLoading.value = true
  debugStatus.value = 'loading'
  const data = await debugCodeUsingPost({
    code: codeModelList.value[currentIndex.value].code,
    language: codeModelList.value[currentIndex.value].language,
    description: codeModelList.value[currentIndex.value].description,
  })
  if (data.code === 0) {
    try {
      console.log(data)

      // 随机模拟成功或失败
      if (data.data.code === 1) {
        debugStatus.value = 'success'
        debugResult.value = {
          message: '调试成功！所有测试用例通过',
          passed: 100,
          total: 100,
        }
        message.success('调试成功')
      } else if (data.data.code === 2) {
        debugStatus.value = 'error'
        debugResult.value = {
          message: '调试失败：有测试用例未通过',
          testCases: [
            {
              input: `${data.data.input}`,
              errorOutput: `${data.data.errorOutput}`,
              correctOutput: `${data.data.correctOutput}`,
            },
          ],
        }
        message.error('调试失败')
      } else if (data.data.code === 3) {
        debugStatus.value = 'error'
        debugResult.value = {
          message: data.data.error,
        }
        message.error('代码语法错误')
      } else {
      }
    } catch (error) {
      debugStatus.value = 'error'
      debugResult.value = {
        message: '调试过程中发生错误',
        error: error.message,
      }
      message.error('调试失败')
      debugStatus.value = ''
    }
  } else {
    message.error('调试失败:' + data.message)
    debugStatus.value = ''
  }
  //清除加载状态
  debugLoading.value = false
}

/**
 * 开始监控页面离开行为
 */
const startPageLeaveMonitoring = () => {
  // 检查是否为全流程面试
  if (!redirect) {
    console.log('非全流程面试，不进行页面监控')
    return
  }

  // 重置页面离开计数和状态
  pageLeaveCount.value = 0
  isMonitoringPageLeave.value = true
  isCurrentlyAway.value = false

  // 添加页面可见性变化事件监听
  document.addEventListener('visibilitychange', handleVisibilityChange)

  // 添加窗口失去焦点和获得焦点事件监听
  window.addEventListener('blur', handleWindowBlur)
  window.addEventListener('focus', handleWindowFocus)

  console.log('开始监控页面离开行为')

  // 显示监控提示
  message.success('面试监控已开始，请不要频繁切换窗口或标签页，切换标签页或窗口5次将自动结束面试')
}

/**
 * 处理页面可见性变化
 */
const handleVisibilityChange = () => {
  //只有处于当前监控页面才处理
  if (!isMonitoringPageLeave.value) return

  //如果当前页面隐藏
  if (document.visibilityState === 'hidden') {
    // 用户离开页面
    isCurrentlyAway.value = true
    console.log('用户离开页面 (visibility hidden)')
  } else if (document.visibilityState === 'visible' && isCurrentlyAway.value) {
    // 用户返回页面，完成一次完整的切屏行为
    isCurrentlyAway.value = false
    recordPageLeave('页面切换')
  }
}

/**
 * 处理窗口失去焦点
 */
const handleWindowBlur = () => {
  //只有处于当前监控页面才处理
  if (!isMonitoringPageLeave.value) return

  // 标记用户已离开
  isCurrentlyAway.value = true
  console.log('用户离开页面 (window blur)')
}

/**
 * 处理窗口获得焦点
 */
const handleWindowFocus = () => {
  //只有处于当前监控页面才处理
  if (!isMonitoringPageLeave.value) return

  // 如果之前标记为离开，现在回来了，记录一次完整切屏
  if (isCurrentlyAway.value) {
    isCurrentlyAway.value = false
    recordPageLeave('窗口切换')
  }
}

/**
 * 记录页面离开并检查是否达到上限
 */
const recordPageLeave = async (reason) => {
  //只有处于当前监控页面才处理
  if (!isMonitoringPageLeave.value) return

  pageLeaveCount.value++
  console.log(`完成一次完整的页面切换 (${reason}): 第 ${pageLeaveCount.value} 次`)

  // 每次切换都提示用户当前的切换次数
  message.info(`您已切换页面${pageLeaveCount.value}次，最多允许切换${MAX_PAGE_LEAVE_COUNT}次`)

  // 如果达到最大次数，提示并取消面试
  if (pageLeaveCount.value >= MAX_PAGE_LEAVE_COUNT) {
    message.error(`您已切换页面${MAX_PAGE_LEAVE_COUNT}次，面试将自动结束`)

    // 停止监控
    stopPageLeaveMonitoring()
    // 发送请求取消笔试
    await cancelExam()
  } else if (pageLeaveCount.value >= MAX_PAGE_LEAVE_COUNT - 1) {
    // 当接近最大次数时发出警告
    message.warning(
      `警告：您已切换页面${pageLeaveCount.value}次，再切换${
        MAX_PAGE_LEAVE_COUNT - pageLeaveCount.value
      }次将自动结束面试`
    )
  }
}

/**
 * 停止页面离开监控
 */
const stopPageLeaveMonitoring = () => {
  //只有处于当前监控页面才处理
  if (!isMonitoringPageLeave.value) {
    console.log('没有正在进行的页面监控')
    return
  }

  // 移除事件监听
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  window.removeEventListener('blur', handleWindowBlur)
  window.removeEventListener('focus', handleWindowFocus)

  isMonitoringPageLeave.value = false
  isCurrentlyAway.value = false
  console.log('已停止页面离开监控')
}

// 生命周期钩子
onMounted(() => {
  //获取笔试题目
  fetchExamData()

  startTimer()
  message.success('笔试已开始，请合理安排时间！', 3)

  //记录重定向
  redirect = (route.query.redirect as string) || ''

  //如果为全流程面试，开始监控页面离开
  startPageLeaveMonitoring()
})

onBeforeUnmount(() => {
  if (timerInterval.value) {
    clearInterval(timerInterval.value)
  }

  // 如果正在监控页面离开，停止监控
  if (isMonitoringPageLeave.value) {
    stopPageLeaveMonitoring()
  }
})

// 监听剩余时间变化，当时间低于10分钟时显示警告
watch(timeRemaining, (newValue) => {
  if (newValue === 600) {
    // 10分钟
    message.warning('还剩10分钟，请抓紧时间！', 3)
  } else if (newValue === 300) {
    // 5分钟
    message.warning('还剩5分钟，请尽快完成！', 3)
  } else if (newValue === 60) {
    // 1分钟
    message.warning('还剩1分钟！', 3)
  }
})
// 监听编程题的变化，如果切换问题，清除调试状态
watch(currentIndex, () => {
  debugStatus.value = ''
})
// 监听 tempAnswers 变化
watch(
  tempAnswers,
  (newVal) => {
    answers.value[currentIndex.value] = {
      type: questions.value[currentIndex.value].type,
      userAnswer: newVal[currentIndex.value],
    }
    // 在这里处理变化逻辑（如提交答案、校验等）
  },
  {
    deep: true, // 深度监听（监听数组元素变化）
  }
)
</script>

<style scoped>
.written-exam-container {
  padding: 24px;
  height: 100vh;
  background: linear-gradient(to bottom, #f0f2f5, #e6f7ff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 24px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.exam-title h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.exam-description {
  color: #666;
  font-size: 0.95rem;
}

.exam-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: #f6f6f6;
  border-radius: 20px;
  transition: all 0.3s ease;
  text-align: center;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.exam-timer.timer-warning {
  background-color: #fff2e8;
  animation: pulse 2s infinite;
}

.timer-hint {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #888;
}

.exam-body {
  display: flex;
  gap: 24px;
  flex: 1;
  overflow: hidden;
}

.question-area {
  flex: 3;
}

.question-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.question-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.question-number {
  font-weight: 500;
  margin-right: 16px;
}

.question-type {
  background-color: #e6f7ff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #1890ff;
}

.nav-buttons {
  display: flex;
  gap: 8px;
}

.question-content {
  flex: 1;
  padding: 8px 0;
}

.question-title {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.question-desc {
  margin-bottom: 24px;
  color: #666;
  font-size: 0.95rem;
}

.choice-options {
  padding: 8px 0;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.option-item {
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: all 0.3s;
  margin-right: 0 !important;
}

.option-item:hover {
  background-color: #f0f0f0;
}

/* 调试状态样式 */
.debug-status {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.debug-loading {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.debug-success {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}

.debug-error {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  color: #ff4d4f;
}

.test-case {
  margin-top: 12px;
  padding: 8px;
  border-radius: 4px;
  background-color: #fafafa;
}

.test-case-failed {
  background-color: #fff1f0;
}

.test-case-label {
  font-weight: 500;
  margin-right: 8px;
}

.debug-success-border {
  border: 1px solid #b7eb8f !important;
}

.debug-error-border {
  border: 1px solid #ffccc7 !important;
}

.essay-area {
  margin-top: 16px;
}

.answer-card-area {
  flex: 1;
  overflow-y: auto;
}

.answer-card {
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.progress-section {
  margin-bottom: 16px;
}

.progress-label {
  margin-bottom: 8px;
  color: #666;
}

.question-navigator {
  margin-bottom: 16px;
}

.navigator-title {
  margin-bottom: 12px;
  color: #666;
}

.navigator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.navigator-button {
  width: 100%;
}

.navigator-button.answered-button {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.45);
}

.submission-section {
  margin-top: 24px;
}

.submission-alert {
  margin-bottom: 16px;
}

.submit-button {
  height: 44px;
  font-size: 1.05rem;
}

.time-up-content {
  text-align: center;
  padding: 16px 0;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 173, 20, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(250, 173, 20, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 173, 20, 0);
  }
}
</style>
